<template>
  <div>
    <!-- <nav-bar>
      <template v-slot:left>
        <button>我是左边插槽</button>
      </template>
      <template v-slot:center>
        <a href="">我是中间插槽</a>
      </template>
      <template v-slot:right>
        <h1>我是右边插槽</h1>
      </template>
      <template v-slot:[name]>
        <img src="@/img/kobe02.png" alt="">
      </template>
    </nav-bar> -->
    <!-- 具名插槽使用的时候缩写 -->
  <nav-bar>
      <template #left>
        <button>我是左边插槽</button>
      </template>
      <template #center>
        <a href="">我是中间插槽</a>
      </template>
      <template #right>
        <h1>我是右边插槽</h1>
      </template>
      <template #[name]>
        <img src="@/img/kobe02.png" alt="">
      </template>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from './NavBar.vue'

export default {
  components: { NavBar },
  data() {
    return {
      title: '我还是标题',
      counter: 0,
      name:"end"
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    },
  },
}
</script>

<style scoped>
h2 {
  color: red;
}
</style>
